<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- 只有IE浏览器能识别，用于何种文档模式 IE8/IE9 -->
    <link href="css.css" rel="stylesheet" type="text/css" />
    <title>css基础</title>
    <style type="text/css">
        /* 内部样式 */
        body {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <hr>
    <h1>DIV1 标签选择器id选择器</h1>
    <div>
        <div id="div1">
            div-1
        </div>
        <div>
            div-2
        </div>
        <div>
            div-3
        </div>
    </div>
    <hr>
    <h1>DIV2后代选择器类选择器</h1>   
    <div class="div-parent2">
        <div class="cls-sec">
            div2-1
        </div>
        <div>
            <div class="descen">
                div2-2
            </div>
        </div>
        <div class="cls-sec">
            div2-3
        </div>
        <div class="descen">
            div2-4
        </div>
        <div class="intersection1 intersection2">
            div2-5
        </div>
        <div class="uni1">
            div2-6
        </div>
        <div class="uni2">
            div2-7
        </div>
    </div>
    <hr>
    <h1>DIV3序选择器1</h1>   
    <div class="div-parent3">
        <div>div-3-1</div>
        <p>p-3-1</p>
        <div>div-3-2</div>
        <p>p-3-2</p>
        <div>div-3-3</div>
        <div>div-3-4</div>
        <div>div-3-5</div>
        <div>div-3-6</div>
        <div>div-3-7</div>
    </div>
    <hr>
    <h1>DIV4序选择器2</h1> 
    <div class="div-parent4">
        <div>div-4-1</div>
        <div>
            div-4-2
            <div>&nbsp;&nbsp;&nbsp;&nbsp;div-4-2-1</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;div-4-2-2</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;div-4-2-3</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;div-4-2-4</div>
            <br>
            <br>
        </div>
        <p>
            字体字体字体1
        </p>
        <p>
            字体字体字体2
        </p>
    </div>
    <hr>
    <h1>DIV5 属性选择器</h1> 
    <div class="div-parent5">
        <div> div-5-1</div>
        <div id="div-5-2"> div-5-2</div>
        <div> div-5-3</div>
        <div data-self="se"> div-5-4</div>
    </div>

    <h1>DIV6 字体 </h1> 
    <div class="div-parent6">
        <p>中文中文 abc BCD</p>
        <p>中文中文 abc BCD</p>
        <p>中文中文 abc BCD</p>
        <p>中文中文 abc BCD</p>
        <p>中文中文 abc BCD</p>
        <p>中文中文 abc BCD</p>
        <p>HELLO<span style="vertical-align:super; font-size: 12px;">1</span> WORLD<span style="vertical-align:sub; font-size: 12px;">2</span></p>
    </div>

    <h1>DIV7 常见属性 文字 文本 颜色 背景图片 盒子模型</h1> 
    <div class="div-parent7">
        <div>
            常见属性1
        </div>
        <div>
            常见属性2
        </div>
        <div>
            overflow<br>overflow<br>overflow<br>overflow<br>overflow<br>overflow<br>
            overflow<br>overflow<br>overflow<br>overflow<br>overflow<br>overflow<br>
            overflow<br>overflow<br>overflow<br>overflow<br>overflow<br>overflow<br>
            overflow<br>overflow<br>overflow<br>overflow<br>overflow<br>overflow<br>
            overflow<br>overflow<br>overflow<br>overflow<br>overflow<br>overflow<br>
            overflow<br>overflow<br>overflow<br>overflow<br>overflow<br>overflow<br>
        </div>
        <div>
            text-align: center
        </div>
        <div>
            <span>常见属性5 border</span>
        </div>
        <div>
            parent
            <div class="children1">
                children1
            </div>
            <div class="children2">
                children2
            </div>
        </div>
        <div>
            <div class="inner">
                box-sizing
            </div>
        </div>
    </div>
    <h1>DIV8 css权重</h1>
    <hr>
    <dl>
        <dt>css优先级规则：</dt>
        <dd>1.css选择规则的权值不同时，权值高的优先；</dd>
        <dd>2.css选择规则的权值相同时，后定义的规则优先；</dd>
        <dd>3. css属性后面加 !important 时，无条件绝对优先；</dd>
    </dl>
    <dl>
        <dt>权值等级划分， 一般来说是划分4个等级：</dt>
        <dd>第一等级：代表 内联样式，如 style=""，权值为 1,0,0,0；</dd>
        <dd>第二等级：代表 ID选择器，如 #id="", 权值为 0,1,0,0；</dd>
        <dd>第三等级：代表 calss | 伪类 | 属性 选择器，如 .class | :hover,:link,:target | [type], 权值 0,0,1,0；</dd>
        <dd>第四等级：代表 标签 | 伪元素 选择器，如 p | ::after, ::before, ::fist-inline, ::selection, 权值 0,0,0,1；</dd>
    此外，通用选择器（*），子选择器（>）， 相邻同胞选择器（+）等选择器不在4等级之内，所以它们的权值都为 0,0,0,0；</dd>
    </dl>
    <dl>
        <dt>权值计算 公式：</dt>
        <dd>权值 = 第一等级选择器*个数，第二等级选择器*个数，第三等级选择器*个数，第四等级选择器*个数；</dd>
    </dl>
    </pre>
    <div class="div-parent8">
        <div class="div-8-1">
            div-8-1
            <br>
            <span>span-8-2</span>
            <br>
            <div class="div-8-1-1">
                &nbsp;&nbsp;div-8-1-1
                <br>
                <span style="border: 1px solid black;">&nbsp;&nbsp;span-8-1-2</span>
            </div>
        </div>
        <br>
        <br>
        <div class="div-8-2">
            <div>
                Before Display
            </div>
            <div class="t-display-none">
                Display: none;
            </div>
            <div>
                Between Display Visibility
            </div>
            <div class="t-visibility-hidden">
                Visibility Hidden  
            </div>
            <div>
                Under visibility
            </div>
            <div class="t-line-height">
                line-height
            </div>
        </div>
    </div>
    <h1>DIV9 布局</h1>
    <hr>
    <div class="div-parent9">
        <div class="div-9-1">div9-1</div>
        <div class="div-nowrap">
            <span>span9-2</span>
            <span>span9-3</span>
            <span>span9-4</span>
        </div>
        <br>
        <div class="div-9-5">div-9-5</div>
        <div class="div-9-6">div-9-6</div>
        <div class="div-9-7">div-9-5</div>

        <div class="t-relative-parent">
            <div class="t-relative">
                position: relative;
            </div>
        </div>
        <div class="t-absolute-parent">
            <div class="t-absolute">
                position: absolute;
            </div>
        </div>
        
        <div class="t-z-index-parent">
            <div class="div-1"></div>
            <div class="div-2"></div>
        </div>
    </div>

    <div class="test-box-shadow"></div>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <br/>
    <div class="t-fix-position"></div>
</body>
</html>